<div class="row justify-content-center">
    <div class="col-8">
        <form (ngSubmit)="save()" [formGroup]="editForm" name="editForm" novalidate role="form">
            <h2 id="jhi-operation-heading" jhiTranslate="jhipsterSampleApplicationApp.operation.home.createOrEditLabel">
                Create or edit a Operation</h2>

            <div>
                <jhi-alert-error></jhi-alert-error>

                <div [hidden]="!editForm.get('id')!.value" class="form-group">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input class="form-control" formControlName="id" id="id" name="id" readonly type="text"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_date"
                           jhiTranslate="jhipsterSampleApplicationApp.operation.date">Date</label>
                    <div class="d-flex">
                        <input class="form-control" formControlName="date" id="field_date" name="date"
                               placeholder="YYYY-MM-DD HH:mm" type="datetime-local"/>
                    </div>
                    <div *ngIf="editForm.get('date')!.invalid && (editForm.get('date')!.dirty || editForm.get('date')!.touched)">
                        <small *ngIf="editForm.get('date')?.errors?.required"
                               class="form-text text-danger" jhiTranslate="entity.validation.required">
                            This field is required.
                        </small>
                        <small [hidden]="!editForm.get('date')?.errors?.ZonedDateTimelocal"
                               class="form-text text-danger" jhiTranslate="entity.validation.ZonedDateTimelocal">
                            This field should be a date and time.
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_description"
                           jhiTranslate="jhipsterSampleApplicationApp.operation.description">Description</label>
                    <input class="form-control" formControlName="description" id="field_description" name="description"
                           type="text"/>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_amount"
                           jhiTranslate="jhipsterSampleApplicationApp.operation.amount">Amount</label>
                    <input class="form-control" formControlName="amount" id="field_amount" name="amount"
                           type="number"/>
                    <div *ngIf="editForm.get('amount')!.invalid && (editForm.get('amount')!.dirty || editForm.get('amount')!.touched)">
                        <small *ngIf="editForm.get('amount')?.errors?.required"
                               class="form-text text-danger" jhiTranslate="entity.validation.required">
                            This field is required.
                        </small>
                        <small [hidden]="!editForm.get('amount')?.errors?.number"
                               class="form-text text-danger" jhiTranslate="entity.validation.number">
                            This field should be a number.
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="field_bankAccount"
                           jhiTranslate="jhipsterSampleApplicationApp.operation.bankAccount">Bank Account</label>
                    <select class="form-control" formControlName="bankAccount" id="field_bankAccount"
                            name="bankAccount">
                        <option [ngValue]="null"></option>
                        <option *ngFor="let bankAccountOption of bankaccounts; trackBy: trackById"
                                [ngValue]="bankAccountOption.id === editForm.get('bankAccount')!.value?.id ? editForm.get('bankAccount')!.value : bankAccountOption">
                            {{ bankAccountOption.name }}
                        </option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="field_labels" jhiTranslate="jhipsterSampleApplicationApp.operation.label">Label</label>
                    <select class="form-control" formControlName="labels" id="field_labels" multiple name="labels">
                        <option *ngFor="let labelOption of labels; trackBy: trackById"
                                [ngValue]="getSelected(editForm.get('labels')!.value, labelOption)">{{ labelOption.label
                            }}
                        </option>
                    </select>
                </div>
            </div>

            <div>
                <button (click)="previousState()" class="btn btn-secondary" id="cancel-save" type="button">
                    <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>

                <button [disabled]="editForm.invalid || isSaving" class="btn btn-primary" id="save-entity"
                        type="submit">
                    <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
